<html>
<head>
    <title>电量统计</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 300px;
            width: 90%;
        }
        .tab-title{
            margin-top: 20px;
            text-align: center;
            font-size: larger;
            color: #333333;
            font-weight: bold;
        }



    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title"> 综合月报</div>
    <div class="page-main">
        <el-row>
            <el-col :span="4">
                <dev-tree ref="devTree" v-on:click-node="aa" :tabsign="'z'" ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-date-picker type="month" v-model="day" value-format="yyyy-MM" placeholder="日期" style="width: 150px;"></el-date-picker>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="search" style="background: #578BBB">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                    <el-tab-pane label="经济用电" name="eleB">
                        <div class="chart-outer" id="elePowerChart">
                        </div>
                        <div class="chart-outer" id="eleFeeChart">
                        </div>
                        <p class="tab-title">电费电量统计表</p>
                        <el-table  show-summary border stripe style="width: 100%" :data="eleCount">
                        <el-table-column prop="name" label="设备名称" align="center">
                        </el-table-column>
                            <el-table-column prop="totalP" label="总电量（kW.h）" align="center">
                            </el-table-column>
                            <el-table-column prop="totalFee" label="总电费（元）" align="center">
                            </el-table-column>
                            <el-table-column  label="谷" align="center">
                                <el-table-column prop="gUse" label="谷电量（kW.h）" align="center">
                                </el-table-column>
                                <el-table-column prop="gFee" label="谷电费（元）" align="center">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column  label="平" align="center">
                                <el-table-column prop="pUse" label="平电量（kW.h）" align="center">
                                </el-table-column>
                                <el-table-column prop="pFee" label="平电费（元）" align="center">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column  label="峰" align="center">
                                <el-table-column prop="fUse" label="峰电量（kW.h）" align="center">
                                </el-table-column>
                                <el-table-column prop="fFee" label="峰电费（元）" align="center">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column  label="尖" align="center">
                                <el-table-column prop="jUse" label="尖电量（kW.h）" align="center">
                                </el-table-column>
                                <el-table-column prop="jFee" label="尖电费（元）" align="center">
                                </el-table-column>
                            </el-table-column>
                          </el-table>
                        <p class="tab-title">设备功率因数分析</p>
                        <el-table border stripe style="width: 100%" :data="paramData">
                            <el-table-column prop="groupName" label="设备名称" align="center">

                            </el-table-column>
                            <el-table-column  label="月平均电流（A）" align="center">
                                <el-table-column label="A"  prop="field76" align="center">

                                </el-table-column>
                                <el-table-column label="B"  prop="field77" align="center">

                                </el-table-column>
                                <el-table-column label="C"  prop="field78" align="center">

                                </el-table-column>

                            </el-table-column>
                            <el-table-column prop="field79" label="月平均功率因数" align="center">

                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                <el-tab-pane label="安全洁净用电" name="eleC">
                    <p class="tab-title">三相不平衡</p>
                    <el-table border stripe style="width: 100%" :data="paramData">
                        <el-table-column prop="groupName" label="设备名称" align="center">
                        </el-table-column>
                        <el-table-column  label="月平均电流（A）" align="center">
                            <el-table-column label="A"  prop="field76" align="center">

                            </el-table-column>
                            <el-table-column label="B"  prop="field77" align="center">

                            </el-table-column>
                            <el-table-column label="C"  prop="field78" align="center">

                            </el-table-column>
                            <el-table-column label="Z"  prop="value" align="center">

                            </el-table-column>
                        </el-table-column>
                        <el-table-column  label="月平均线电压" align="center">
                            <el-table-column label="Uab"  prop="field73" align="center">

                            </el-table-column>
                            <el-table-column label="Ubc"  prop="field74" align="center">

                            </el-table-column>
                            <el-table-column label="Uca"  prop="field75" align="center">

                            </el-table-column>
                        </el-table-column>

                        <el-table-column label="三相电流不平衡度（%）"  prop="field99" align="center">

                        </el-table-column>
                        <el-table-column label="三相电压不平衡度（%）"  prop="field98" align="center">

                        </el-table-column>
                    </el-table>
                    <p class="tab-title">谐波平均值</p>
                    <el-table border stripe style="width: 100%" :data="paramData">
                        <el-table-column prop="groupName" label="设备名称" align="center">
                        </el-table-column>
                        <el-table-column prop="field72" label="月平均负荷（KW）" align="center">
                        </el-table-column>
                        <el-table-column  label="月平均电流（A）" align="center">
                            <el-table-column label="A"  prop="field76" align="center">

                            </el-table-column>
                            <el-table-column label="B"  prop="field77" align="center">

                            </el-table-column>
                            <el-table-column label="C"  prop="field78" align="center">

                            </el-table-column>

                        </el-table-column>
                        <el-table-column  label="谐波电流平均值" align="center">
                            <el-table-column label="A"  prop="field95" align="center">

                            </el-table-column>
                            <el-table-column label="B"  prop="field96" align="center">

                            </el-table-column>
                            <el-table-column label="C"  prop="field97" align="center">

                            </el-table-column>
                        </el-table-column>
                        <el-table-column label="谐波电压平均值"  prop="value" align="center">
                            <el-table-column label="A"  prop="field92" align="center">

                            </el-table-column>
                            <el-table-column label="B"  prop="field93" align="center">

                            </el-table-column>
                            <el-table-column label="C"  prop="field94" align="center">

                            </el-table-column>
                        </el-table-column>

                    </el-table>

                    <p class="tab-title">频率偏差　电压偏差</p>
                    <el-table border stripe style="width: 100%" :data="paramData">
                        <el-table-column prop="groupName" label="设备名称" align="center">
                        </el-table-column>
                        <el-table-column prop="value" label="频率偏差" align="center">
                        </el-table-column>
                        <el-table-column  label="相电压偏差" align="center">
                            <el-table-column label="A"  prop="value" align="center">

                            </el-table-column>
                            <el-table-column label="B"  prop="value" align="center">

                            </el-table-column>
                            <el-table-column label="C"  prop="value" align="center">

                            </el-table-column>
                        </el-table-column>
                        <el-table-column  label="线电压偏差" align="center">
                            <el-table-column label="Uab"  prop="value" align="center">

                            </el-table-column>
                            <el-table-column label="Ubc"  prop="value" align="center">

                            </el-table-column>
                            <el-table-column label="Uca"  prop="value" align="center">

                            </el-table-column>
                        </el-table-column>

                    </el-table>

                </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>


</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            day:'',
            tabName:'eleB',
            ChartData:{},
            plan:'',
            expandId:'',
            currentId:'',
            eleCount:[],  //电费电量统计
            paramData:[], //参数表格
            number:2,
        },
        created:function(){

            this.day = TimeUtil.convertToString(new Date()).substr(0,7);


        },
        mounted:function(){
            this.getChart('elePowerChart','');
            this.getChart('eleFeeChart','');
            this.eleCount=[];
            this.paramData=[];
        },
        methods:{
            search:function(){

            },
            aa:function(data){
                this.currentId = data.id;


                    this.getTabData();
            },
            onTabClick(tab, event){
                if(tab.name == 'eleC'){

                }

            },
            getTabData:function(){
                var ids =this.currentId.split('_');
                var dArr = this.day.split('-');
                var param={
                    zoneIds:[ids[1]].join(','),

                    energyType:'Electric',
                    year:dArr[0]||0,
                    month:dArr[1]||0,
                    day:dArr[2]||0,
                    sumType:3
                };
                switch (ids[0]) {
                    case "Z":  //区域
                        param['zoneType'] = 0;
                        break;
                    default:

                        this.getChart('elePowerChart','');
                        this.getChart('eleFeeChart','');
                        this.eleCount=[];
                        this.paramData=[];
                        break;
                        return;
                }
                // 所有用电的电量统计

                HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                    var usedata = [];
                    for (var item of res.data){
                        var devicedata = {};
                        devicedata={
                            id:item.groupId,
                            name:item.groupName,
                            totalP:item.field04,
                            jUse:item.attributes.pv_j,
                            fUse:item.attributes.pv_f,
                            pUse:item.attributes.pv_p,
                            gUse:item.attributes.pv_g,
                        }
                        usedata.push(devicedata);
                    }
                    //所有用电费用统计
                    param['energyType'] = 'Electric2Money';

                    HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{

                        for (var item of res.data){
                            for (var ind in usedata){
                                if (usedata[ind].id == item.groupId){
                                    usedata[ind]['totalFee'] = item.field04;
                                    usedata[ind]['jFee'] = item.attributes.pv_j;
                                    usedata[ind]['fFee'] = item.attributes.pv_f;
                                    usedata[ind]['pFee'] = item.attributes.pv_p;
                                    usedata[ind]['gFee'] = item.attributes.pv_g;
                                }
                            }

                        }
                        this.eleCount = usedata;
                        //电量电费chart
                        param['sumType'] = 0;
                        param['energyType'] = 'Electric';
                        HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                            var Pchartdata ={};
                            Pchartdata['name'] = res.data[0].groupName;
                            var Pdata=[],Fdata=[],Jdata=[],Gdata=[];
                            for (var item of res.data){
                                for(var i =1;i<32;i++){
                                    var tmp = i;
                                    tmp=tmp<10?String('0'+tmp):(tmp)
                                    Pdata.push(item.attributes['pv_p'+tmp]||0);
                                    Jdata.push(item.attributes['pv_J'+tmp]||0);
                                    Fdata.push(item.attributes['pv_F'+tmp]||0);
                                    Gdata.push(item.attributes['pv_G'+tmp]||0);
                                }
                            }
                            Pchartdata['Pdata']=Pdata;
                            Pchartdata['Fdata']=Fdata;
                            Pchartdata['Jdata']=Jdata;
                            Pchartdata['Gdata']=Gdata;
                            param['energyType'] = 'Electric2Money';
                            HttpUtil.get('Analysis/getEnergyUse', param).success((res)=>{
                                var chartdata ={};
                                chartdata['name'] = res.data[0].groupName;
                                var Pdata=[],Fdata=[],Jdata=[],Gdata=[];
                                for (var item of res.data){
                                    for(var i =1;i<32;i++){
                                        var tmp = i;
                                        tmp=tmp<10?String('0'+tmp):(tmp)
                                        Pdata.push(item.attributes['pv_p'+tmp]||0);
                                        Jdata.push(item.attributes['pv_J'+tmp]||0);
                                        Fdata.push(item.attributes['pv_F'+tmp]||0);
                                        Gdata.push(item.attributes['pv_G'+tmp]||0);
                                    }
                                }
                                chartdata['Pdata']=Pdata;
                                chartdata['Fdata']=Fdata;
                                chartdata['Jdata']=Jdata;
                                chartdata['Gdata']=Gdata;
                                this.getChart('elePowerChart',Pchartdata);
                                this.getChart('eleFeeChart',chartdata);
                                //参数
                                param['sumType'] = 3;
                                param['energyType'] = 'Electric';
                                HttpUtil.get('Analysis/getEnergyParam', param).success((res)=>{
                                    this.paramData = res.data;
                                })
                            })

                        });
                    })
                });


            },

            getChart:function (id,data) {
                let myChart = echarts.init(document.getElementById(id));
                this.ChartData={
                    title:{
                        text:id=='elePowerChart'?(data.name||'')+'月电量统计':(data.name||'')+'月电费统计',
                        subtext: '单位（KW/h）',
                    },
                    color: ['#30BFCD', '#234567','#F98317','#ee4f63'],
                    tooltip: {
                        show:true,
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    toolbox: {

                        show : true,

                        feature : {

                            mark : {show: true},

                            dataView : {show: true, readOnly: false},

                            magicType : {show: true, type: ['line', 'bar']},

                            restore : {show: true},

                            saveAsImage : {show: true}

                        }

                    },
                    legend: {
                        data: ['尖电量', '峰电量', '平电量','谷电量'],
                        textStyle: { //图例文字的样式
                            color: '#9AA1AA',
                            fontSize: 16
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: 'blue'
                            }
                        }
                    }],
                    series: [{
                        name: '尖电量',
                        type: 'bar',
                        stack: 'process',
                        data:data.Jdata
                    },
                        {
                            name: '峰电量',
                            type: 'bar',
                            stack: 'process',
                            data: data.Fdata
                        },
                        {
                            name: '平电量',
                            type: 'bar',
                            stack: 'process',
                            data:data.Pdata
                        },
                        {
                            name: '谷电量',
                            type: 'bar',
                            stack: 'process',
                            data: data.Gdata,
                        },
                    ]
                };
                myChart.setOption( this.ChartData);
            },
        },

    });


</script>

</body>
</html>
